<template>
  <div>
    <el-menu-item index="5" :route="'/main/home'">
      <i class="el-icon-menu"></i>
      <span slot="title">主页</span>
    </el-menu-item>
    <div v-if="isAdmin">
      <el-submenu index="1">
        <template slot="title">
          <i class="el-icon-location"></i>
          <span>用户管理</span>
        </template>
        <el-menu-item index="1-1" :route="'/main/personal'">个人信息</el-menu-item>
        <el-submenu index="1-2">
          <template slot="title">用户</template>
          <el-menu-item index="1-2-1" :route="'/main/users'">所有用户</el-menu-item>
          <el-menu-item index="1-2-2" :route="'/main/roles'">所有角色</el-menu-item>
        </el-submenu>
      </el-submenu>
    </div>
    <div v-else>
      <el-menu-item index="1" :route="'/main/personal'">
        <i class="el-icon-menu"></i>
        <span slot="title">个人信息</span>
      </el-menu-item>
    </div>
    <el-menu-item v-if="isAdmin" index="2" :route="'/main/tasks'">
      <i class="el-icon-menu"></i>
      <span slot="title">任务</span>
    </el-menu-item>
    <el-menu-item v-if="isAdmin" index="3" :route="'/main/news'">
      <i class="el-icon-document"></i>
      <span slot="title">新闻公告</span>
    </el-menu-item>
    <el-menu-item v-if="isAdmin" index="4" :route="'/main/logs'">
      <i class="el-icon-document"></i>
      <span slot="title">日志统计</span>
    </el-menu-item>
  </div>
</template>

<script>
import store from '../store'
export default {
  name: "MenuTree",
  data(){
    return{
      isAdmin: false
    }
  },
  mounted() {
    this.adminView()
  },
  methods:{
    adminView(){
      store.dispatch('user/getInfo').then(
        response =>{
          const role = response.role
          if (role === 'admin'){
            this.isAdmin = true
          }
        }
      )
    }
  }
}
</script>

<style scoped>

</style>
